<template>
  <div class="container">
    <div class="charts">
      <div class="clueCount">
        <h1>线索转化统计</h1>
        <ol>
          <li>线索===>商机：{{ cluetrendData.clueTotal? `${(cluetrendData.business/cluetrendData.clueTotal*100).toFixed(2)}%` : '0.0%' }}</li>
          <li>线索===>线索池：{{ cluetrendData.clueTotal? `${(cluetrendData.cluePool/cluetrendData.clueTotal*100).toFixed(2)}%` : '0.0%' }}</li>
          <li>商机===>客户：{{ cluetrendData.business? `${(cluetrendData.customer/cluetrendData.business*100).toFixed(2)}%` : '0.0%' }}</li>
          <li>商机===>公海池：{{ cluetrendData.clueTotal? `${(cluetrendData.businessPool/cluetrendData.business*100).toFixed(2)}%` : '0.0%' }}</li>
          <li>客户转化率：{{ cluetrendData.clueTotal? `${(cluetrendData.customer/cluetrendData.clueTotal*100).toFixed(2)}%` : '0.0%' }}</li>
        </ol>
      </div>
    </div>
    <div class="charts" ref="chart" style="width: 50%; height: 400px;"></div>
  </div>

</template>

<script>
import echarts from 'echarts'

export default {
  name: 'CustomerCharts',
  data () {
    return {
      cluetrendData: {
        clueTotal: 100,
        cluePool: 30,
        business: 70,
        businessPool: 30,
        customer: 40
      }
    }
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    renderChart () {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        series: {
          type: 'sankey',
          layout: 'none',
          emphasis: {
            focus: 'adjacency'
          },
          data: [
            {
              name: '线索'
            },
            {
              name: '线索池'
            },
            {
              name: '商机'
            },
            {
              name: '公海池'
            },
            {
              name: '客户'
            }
          ],
          links: [
            {
              source: '线索',
              target: '商机',
              value: this.cluetrendData.business
            },
            {
              source: '线索',
              target: '线索池',
              value: this.cluetrendData.cluePool
            },
            {
              source: '商机',
              target: '公海池',
              value: this.cluetrendData.businessPool
            },
            {
              source: '商机',
              target: '客户',
              value: this.cluetrendData.customer
            }
          ]
        }
      })
    }
  }
}
</script>
<style>
.container{
  display: flex;
  margin: 0 auto;
}
.charts{
  width: 50%;
}
.clueCount{
  margin-top: 50px;
  text-align: center;
  line-height: 50px;
}
ol{
  list-style: none;
}
li{
  font-size: 20px;
}
</style>
